<template>
  <div class="app-container" style="padding:1vh 2vw">
    <div class="tab-container" style="margin: 6vh 2vw;">
      <el-table
        :data="auditsList"
        :size="handleSize()"
        tooltip-effect="light"
        highlight-current-row
        max-height="800"
        style="width: 100%;"
      >
        <el-table-column prop="title" label="标题" show-overflow-tooltip max-width="300" min-width="150"/>
        <el-table-column label="发布者" max-width="200" min-width="100" align="center">
          <template v-slot="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>学号: {{ scope.row.adminNumber }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="zone" label="活动地点" min-width="100" max-width="200"/>
        <el-table-column prop="type" label="活动类型" min-width="100" max-width="200">
          <template v-slot="scope">
            <el-tag :type="scope.row.type | typeFilter">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="250" max-width="300" align="center">
          <template v-slot="{row,$index}">
            <el-button v-show="device() !== 'mobile'" size="mini" @click="handleAudit(row)" icon="el-icon-view">审核</el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="success" icon="el-icon-check"  @click="handleEnable(row)">启用</el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="danger" icon="el-icon-delete"  @click="handleUnable(row)">驳回</el-button>
            <el-button v-show="device() === 'mobile'" size="mini" @click="handleAudit(row)" icon="el-icon-view" circle/>
            <el-button v-show="device() === 'mobile'" size="mini" type="success" icon="el-icon-check"  @click="handleEnable(row)" circle/>
            <el-button v-show="device() === 'mobile'" size="mini" type="danger" icon="el-icon-delete"  @click="handleUnable(row)" circle/>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="display: flex;justify-content: center;margin-top: 5vh">
        <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
          <el-pagination
            v-show="total>0"
            background
            hide-on-single-page
            :current-page.sync="currentPage"
            :page-size="perPage"
            :pager-count="5"
            layout="prev, pager, next"
            @prev-click="change"
            @next-click="change"
            @current-change="change"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {indexUser} from "@/api/admin/user";
import {getAdminActivityAdmin, indexAdminActivityAdmin} from "@/api/admin/activityAdmin";
import { indexActivities } from '@/api/admin/activity'
import { itemActivity } from '@/api/user/activity'
import { itemAdmin } from '@/api/admin/admin'

export default {
  filters: {
    typeFilter(type) {
      const typeMap = {
        '讲座学习': '',
        '就业讲座': '',
        '政治学习': 'danger',
        '志愿服务': 'danger',
        '社会实践': 'success',
        '校园文化': 'success',
        '文艺活动': 'warning',
        '学科竞赛': 'warning',
        '服务性劳动': 'warning'
      }
      return typeMap[type]
    }
  },
  // filters: {
  //   statusFilter(status) {
  //     const statusMap = {
  //       published: 'success',
  //       draft: 'gray',
  //       deleted: 'danger'
  //     }
  //     return statusMap[status]
  //   }
  // },
  data() {
    return {
      currentPage: 1,
      lastPage: 0,
      total: 0,
      perPage: 12,
      auditsList: [],
    }
  },
  created() {
    // 从服务器获取 待审核列表
    this.currentPage = 1
    this.getAuditActivity()
  },
  methods: {
    // 获取待审核列表
    async getAuditActivity() {
      // 获得可用的可以被发布给的管理员的名单
      const res = await indexActivities({page: this.currentPage,status: 0})
      let auditsList = res.data.data
      for (const auditsListKey in auditsList) {
        const resAdmin = await itemAdmin({id: auditsList[auditsListKey].number})
        auditsList[auditsListKey]['name'] = resAdmin.data.name
        auditsList[auditsListKey]['adminNumber'] = resAdmin.data.number
      }

      this.auditsList = auditsList
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 返回设备类别
    device() {
      return this.$store.state.app.device
    },
    // 根据设备类型控制尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 换页
    change(e) {
      this.currentPage = e;
      this.getActivities();
    },
    // 根据学号获取 发布者姓名
    getUserName(number) {
      const res = indexUser({number: number})
      return res.data.data.name
    },
    // 根据学号获取 发布者学院
    getUserCollege(number) {
      const res = indexUser({number: number})
      return res.data.data.college
    },
    // 审核活动
    handleAudit(row) {
      // 处理审核逻辑
      // 跳转到活动详情页
      this.$router.push(
        {
          path: '/activity/detail',
          query: { id: row.id }
        }
      )
    },
    // 启用活动
    handleEnable(row) {
      // 处理启用逻辑
      this.row.status === 1
      changeActivity(row).then(() => {
        this.$notify({
          title: '成功',
          message: '启用成功',
          type: 'success',
          duration: 2000
        })
      }).catch
      {
        console.log(error)
        this.$notify({
          title: '失败',
          message: '启用失败',
          type: 'danger',
          duration: 2000
        })
      }
    },
    // 驳回活动
    handleUnable(row) {
      // 处理驳回逻辑
      // 处理启用逻辑
      this.row.status === 2
      changeActivity(row).then(() => {
        this.$notify({
          title: '成功',
          message: '驳回成功',
          type: 'success',
          duration: 2000
        })
      }).catch
      {
        console.log(error)
        this.$notify({
          title: '失败',
          message: '驳回失败',
          type: 'danger',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  //margin: 30px 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .tab-container {
    //margin: 30px 1.4rem;
  }
}
</style>
